<template>

	<view class=".own-css">
		<!-- #ifndef MP -->
		<view class="StatusBarHeightCss"></view>
		<!-- 固定在顶部的导航栏 -->
		<!-- 搜索导航 -->
		<view class="nav-bar">
			<view class="nav-bar-img">
				<image src="../../static/img/index1/u53.png" mode=""></image>
			</view>
			<view class="nav-bar-right" @tap="toSignIn">
				<!-- <uni-icon type="bars" size="22" color="#666666"></uni-icon> -->
				<view class="nav-bar-right-icon">
					<image src="../../static/img/own/icon-rili.png" mode=""></image>
					签到
				</view>
			</view>
		</view>
		<view class="status-placeholder-top"></view>
		<view class="status-placeholder-buttom"></view>
		<!-- #endif -->

		<view class="own-one">
			<image class="own-img" src="../../static/img/index1/u204.png"></image>
			<view class="own-one-yue">
				<text style="text-align: center;font-weight:bold;color:#C24D50;">0.00</text>
				<text style="color: #7992AC;">账户余额</text>
			</view>
		</view>

		<view class="own-mid-background"></view>

		<view class="icon-color">
			<view class="uni-list-cell-navigate uni-navigate-right" @tap="toOrderList(999)">
				我的订单
			</view>
			<view class="icon-list ">
				<view class="icon-list-item" v-for="(item,index) in orderIcon" :key="index">
					<view class="icon-list-item-image" @tap="toOrderList(index)">
						<image :src="item.iconURL" mode="widthFix"></image>
					</view>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>

		<view class="own-mid-background"></view>

		<view class="own-tow icon-color">
			<view class="">
				<view class="icon-list ">
					<view class="icon-list-item" v-for="(item,index) in ownFirst" :key="index">
						<view class="icon-list-item-image" @tap="toOrderItemFirst(index)">
							<image :src="item.iconURL" mode="widthFix"></image>
						</view>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="icon-list ">
					<view class="icon-list-item" v-for="(item,index) in ownSecond" :key="index">
						<view class="icon-list-item-image" @tap="toOrderItemSecond(index)">
							<image :src="item.iconURL" mode="widthFix"></image>
						</view>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import uniIcon from "components/uni-icon.vue"

	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				orderIcon: [{
						iconURL: "../../static/img/own/icon-qianbao.png",
						"text": "待付款"
					},
					{
						iconURL: "../../static/img/own/icon-huowu.png",
						"text": "待发货"
					},
					{
						iconURL: "../../static/img/own/icon-yifahuo.png",
						"text": "已发货"
					},
					{
						iconURL: "../../static/img/own/icon-wenjianjia.png",
						"text": "已完成"
					}
				],
				ownFirst: [{
						iconURL: "../../static/img/own/icon-shoucang.png",
						"text": "收藏"
					},
					{
						iconURL: "../../static/img/own/icon-wenzhang.png",
						"text": "文章"
					},
					{
						iconURL: "../../static/img/own/icon-xiaoxi.png",
						"text": "消息"
					},
					{
						iconURL: "../../static/img/own/icon-tuijianma.png",
						"text": "推荐码"
					}
				],
				ownSecond: [{
						iconURL: "../../static/img/own/icon-xiaolian.png",
						"text": "联系客服"
					},
					{
						iconURL: "../../static/img/own/icon-zichanguanli.png",
						"text": "资金管理"
					},
					{
						iconURL: "../../static/img/own/icon-shezhi.png",
						"text": "账户设置"
					},
					{
						iconURL: "../../static/img/own/icon-shimingrenzheng.png",
						"text": "实名认证"
					}
				],
			}
		},
		methods: {
			toOrderList(index) {
				console.log("orderIndex" + index);
				uni.navigateTo({
					url: "/pages/order/order-list",
				})
			},
			toSignIn() {
				uni.navigateTo({
					url: "/pages/own/own-sign-in"
				})
			},
			toOrderItemFirst(index) {
				console.log(index);
				switch (index) {
					case 0: //收藏
						uni.navigateTo({
							url: "/pages/own/own-collection"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/own/own-article"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/own/own-message"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/own/referral-code"
						})
						break;
					default:
						break;
				}
			},
			toOrderItemSecond(index) {
				console.log(index);
				switch (index) {
					case 0: 
						uni.navigateTo({
							url: "/pages/own/customer-service"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/own/own-fund-management"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/own/own-account-settings"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/own/authentication"
						})
						break;
					default:
						break;
				}
			}
		},
	}
</script>

<style lang="scss">
	.own-css {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
		// border: 1px solid red;
		background-color: rgba(242, 242, 242, 1) !important;
	}

	.own-css {
		.nav-bar {
			position: fixed;
			background-color: #FFFFFF;
			top: var(--status-bar-height);
			display: block;
			height: 44px;
			text-align: center;
			width: 100%;
			z-index: 1;
			border-bottom: 1px solid rgba(242, 242, 242, 1);
		}

		.nav-bar-img {
			margin: auto;
			position: absolute;
			top: 50%;
			left: 0;
			bottom: 0;
			right: 0;
			height: 44px;
		}

		.nav-bar-right {
			// background-color: red;
			text-align: right;
			top: 15%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			transform: translateY(15%);
			margin-right: 20px;
		}

		.nav-bar-right-icon {
			background-color: rgba(194, 77, 80, 1);
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 2px;
			border-radius: 2px;
			// border: 1px solid red;
		}

		.nav-bar-img image {
			width: 67px;
			height: 21px;
		}

		.nav-bar-right-icon image {
			width: 24px;
			height: 20px;
		}

		.own-one {
			position: relative;
		}

		.own-one-yue {
			position: absolute;
			top: 60%;
			left: 11%;
			// z-index: 0;
			display: flex;
			flex-direction: column;
		}

		.own-img {
			width: 750upx;
			height: 340upx;
		}

		.own-mid-background {
			// color: #FFFFFF;
			background-color: rgba(242, 242, 242, 1);
			height: 20upx;
		}

		.icon-color {
			// margin: 10upx 40upx;
			color: #7992AC;
			background-color: rgba(255, 255, 255, 1)
		}

		.icon-list {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 22upx 30upx;
		}

		.icon-list-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			// border: 1px solid red;
			width: 25%;
		}

		.icon-list-item text {
			text-align: center;
		}

		.icon-list-item-image {
			// border: 1px solid red;
			text-align: center;
		}

		.icon-list-item-image image {
			width: 56upx;
			height: 56upx;
			// border: 1px solid red;
		}
	}
</style>
